/*
文档菜单右键菜单样式
*/
.doc-tree-right-menu {
  @include box(170px, auto);
  @include themeShadow(3px 3px 7px 2px rgba(49, 49, 49, 0.3), 2px 3px 7px 2px #0f0f0f);
  @include themeBg(#f9f9f9, #333434);
  position: fixed;
  z-index: 2002;
  border-radius: 5px;
  font-size: 12px;

  .doc-name {
    font-size: 13px;
    padding: 5px 10px;
    color: var(--el-color-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .menu-content {
    margin: 0;
    color: var(--bl-text-color);
    border-top: 1px solid var(--el-border-color);
    padding: 5px 0;


    &>div,
    .menu-item {
      @include flex(row, flex-start, center);
      line-height: 0.9;
      padding: 5px 5px 5px 10px;
      margin: 0 5px 5px 5px;
      border-radius: 5px;
      cursor: pointer;
      position: relative;

      .iconbl {
        margin-right: 5px;
      }

      // 拥有二级菜单的箭头指示
      .bl-a-rightsmallline-line {
        position: absolute;
        right: -2px;
      }

      .bl-pen {
        font-size: 13px;
        margin-right: 8px;
      }

      &:hover {
        background: var(--el-color-primary-light-8);

        .menu-content-level2 {
          display: block;
          position: absolute;
          left: 160px;
          // top: 0;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }

      // 二级菜单
      .menu-content-level2 {
        @extend .doc-tree-right-menu;
        padding: 5px 0;
        display: none;

        &:hover {
          display: block;
        }

        &>div {
          @extend .menu-item;
          // @include flex(row, flex-start, center);
          // line-height: 0.9;
          // padding: 5px 5px 5px 10px;
          // margin: 0 5px 5px 5px;

          // &:hover {
          //   background: var(--el-color-primary-light-8);
          // }
        }
      }
    }

    .menu-item-divider {
      height: 1px;
      border-bottom: 1px solid var(--el-border-color);
      margin: 0 0 5px 0;
      padding: 0;
    }

    .disabled {
      cursor: not-allowed;
      pointer-events: none;
      color: var(--el-color-info-light-5);

      &:hover {
        color: var(--el-color-info-light-5);
      }
    }
  }
}